import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {
    Row, Col, Select, Button,
} from 'antd';
import moment from 'moment';
import { TablePage } from '../../common/table-page';
import { DateRangePicker } from '../../common/DateRangePicker';
import { Form } from '../../common/form';
import { connectRouter } from '../../../mixins/router';
import './RiskAssessmentReportList.less'
import api from '../../../api/api';

const TableColumn = TablePage.Column;

const riskLevel = [
    {
      value: '3',
      label: '高风险',
    },
    {
      value: '2',
      label: '中风险',
    },
    {
      value: '1',
      label: '低风险',
    }
];
const mapChoiceToOption = (choice, i) => {
  return (<Select.Option key={i} value={choice.value} title={choice.label}>
      {choice.label}
  </Select.Option>)
};

const dateRangeField = {
    parse: val => (val ? val.split(',').map((s) => {
        if (!s) return undefined;
        const m = moment(s);
        return m.isValid() ? m : undefined;
    }) : undefined),
    stringify: val => (val ? val.map(d => ((d && moment.isMoment(d)) ? d.format('YYYY-MM-DD') : '')).join(',') : undefined),
};

const tableDef = TablePage.def({
    riskLevel:{},
    reportDate: dateRangeField,
});
const query = {
  patientId:'',
  riskLevel:'',
  reportDateStart:'',
  reportDateEnd:'',
  skip:0,
  limit:11,
}
class RiskAssessmentReportList extends Component {
    constructor(props){
      super(props)
      this.state = {
        reportData:{
          status:'fulfilled',
          pageIndex:1,
          pageSize:10,
          count:0,
          list:[
            // {
            //   id:0,
            //   reportDate:'2020年1月1日',
            //   riskLevel:1,
            //   riskSort:'2‰'
            // },
            // {
            //   id:1,
            //   reportDate:'2020年1月1日',
            //   riskLevel:1,
            //   riskSort:'2‰'
            // },
            // {
            //   id:2,
            //   reportDate:'2020年1月1日',
            //   riskLevel:1,
            //   riskSort:'2‰'
            // },
            // {
            //   id:3,
            //   reportDate:'2020年1月1日',
            //   riskLevel:1,
            //   riskSort:'2‰'
            // },
            // {
            //   id:4,
            //   reportDate:'2020年1月1日',
            //   riskLevel:1,
            //   riskSort:'2‰'
            // }
          ]
        }
      }
    }

    componentDidMount(){
      // 获取列表数据
      query.patientId = this.props.customerId
      this.getReportData(query)

    }

    componentWillUnmount() {

    }

    formatRiskSort(val){
      if(val){
        return (Math.round(Number(val) * 10000) / 100).toFixed(2) + '%'
      }
    }

    async getReportData(query){
      let router = this.props.router
      let reportData = {}
      let result = await api.getAssessmentReports(query)

      if(result){
        let pageIndex = +router.query.p || 1
        let pageSize = +router.query.ps || 10
        reportData.status  = 'fulfilled'
        reportData.pageIndex  = pageIndex
        reportData.pageSize  = pageSize
        reportData.count  = (pageIndex - 1) * pageSize + result.length
        if(result.length > pageSize){
          result = result.slice(0,-1)
        }
        reportData.list  = result
        // console.log('getReportData reportData:',reportData)
        this.setState({
          reportData
        })
      }
    }


    loadData = ({values}) => {
      query.riskLevel = values.riskLevel
      query.reportDateStart = values.reportDate && values.reportDate[0] && values.reportDate[0].format('yyyy-MM-DD')
      query.reportDateEnd = values.reportDate && values.reportDate[1] && values.reportDate[1].format('yyyy-MM-DD')
      this.getReportData(query)
    }

    resetData = () => {
      // p 为pageIndex,ps为pageSize
      let router = this.props.router
      let pageIndex = +router.query.p || 1
      let pageSize = +router.query.ps || 10
      let skip = (pageIndex - 1) * pageSize
      query.skip = skip < 0 ? 0 : skip
      query.limit = pageSize + 1
      this.getReportData(query)
    }

    render() {
        const { router } = this.props;
        let { reportData  } = this.state
        return (
            <div className="customer">
                <TablePage
                    def={tableDef}
                    data={reportData}
                    onLoadData={this.loadData}
                    onResetData = {this.resetData}
                    tableRef={(table) => { this.table = table; }}
                    autoLoad={false}
                    rowKey="id"
                    renderFormFields={(values, loadData) => {
                      return (
                        <Row gutter={6} className="block filter-box">

                          <Col span={4}>
                            <Form.Item field="riskLevel" height="auto">
                              <Select allowClear placeholder="请选择风险等级">
                                {riskLevel.map(mapChoiceToOption)}
                              </Select>
                            </Form.Item>
                          </Col>
                          <Col span={4}>
                            <Form.Item field="reportDate" height="auto">
                                <DateRangePicker size="default" placeholder="请选择生成日期范围" />
                            </Form.Item>
                          </Col>
                          <Col span={2}>
                            <Button onClick={loadData} style={{ width: '100%', minWidth: 0 }} type="primary">
                                查询
                            </Button>
                          </Col>
                        </Row>
                      );
                    }}
                >
                    <TableColumn
                        title="评估日期"
                        className="t-date"
                        dataIndex="reportDate"
                        key="reportDate"
                    />
                    <TableColumn
                        title="慢病综合风险等级"
                        className="t-risk"
                        dataIndex="riskLevel"
                        key="riskLevel"
                    />
                    <TableColumn
                        title="慢病综合风险排名"
                        className="t-sort"
                        dataIndex="riskSort"
                        key="riskSort"
                        render = {value=>{
                          return this.formatRiskSort(value)
                        }}
                    />


                    <TableColumn
                        title="操作"
                        className="t-opr"
                        dataIndex="id"
                        key="id"
                        render={(value,patient) => {
                          return (
                              <Link
                                  to={`/RiskAssessmentReport/${value}`}
                                  style={{textDecoration:'underline'}}
                              >
                                  查看
                              </Link>
                          )
                        }}
                    />
                </TablePage>
            </div>
        );
    }
}

export default connectRouter(RiskAssessmentReportList);
